<template>
  <el-row :gutter="20">
    <el-col :span="6" class="sou">
    </el-col>
    <el-col :span="18">
    </el-col>
  </el-row>
  <el-table :ref="tableRef" :data="tableData" style="width: 100%">
    <el-table-column fixed prop="employeeId" label="员工号" width="120" />
    <el-table-column fixed prop="name" label="员工姓名" width="120" />
    <el-table-column fixed prop="baseSalary" label="原本工资" width="120" />
    <el-table-column fixed prop="updateTime" label="时间" width="200" />
    <el-table-column fixed prop="commission" label="总奖金（元）" width="100" />
    <el-table-column fixed prop="deduction" label="总扣款（元）" width="120" />
    <el-table-column fixed="right" prop="actualSalary" label="实际工资" width="120" />
  </el-table>
  <div class="demo-pagination-block">
    <!-- 分页查询 -->
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[15, 20, 25, 30]"
      :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { accountAll } from "@/api/finance.js";

const tableData = ref([])

const tableRef = ref(null)

const searchQuery = ref(null)

const size = ref('default')
const background = ref(false)
const disabled = ref(false)

//第几页
const currentPage = ref(1)
//每页条数
const pageSize = ref(15)
//总页数
const pages = ref(null)
//总条数
const total = ref(null)

//换条数
const handleSizeChange = async (newSize) => {
  pageSize.value = newSize
  currentPage.value = 1
  await initTableData()
}
//换页数
const handleCurrentChange = async (newSize) => {
  currentPage.value = newSize
  await initTableData()
}

//初始化
const initTableData = async () => {
  let id
  if (searchQuery.value !== null && searchQuery.value !== "") {
    id = parseInt(searchQuery.value);
  } else {
    id = -1;
  }
  const heSua = await accountAll(id, currentPage.value, pageSize.value)
  if (heSua.data.data.userSalaryPage !== null) {
    tableData.value = heSua.data.data.userSalaryPage.records;
    for (const gongZi of tableData.value) {
      gongZi.updateTime = gongZi.updateTime.replace("T", " ")
    }
    pageSize.value = heSua.data.data.userSalaryPage.size
    currentPage.value = heSua.data.data.userSalaryPage.current
    total.value = heSua.data.data.userSalaryPage.total
    pages.value = heSua.data.data.userSalaryPage.pages
  }
}

nextTick(() => {
  initTableData()
})
</script>

<style scoped>
.demo-pagination-block {
  width: 100%;
}

.sou {
  padding-top: 10px;
}
</style>